<template>
	<view class="stone p-20">
		<view class="number bold m-b-10">
			{{user.stone}}
		</view>
		<view class="f-xxs m-b-30">我的元石</view>
		<u--image src="../../static/img/stone.png" width="100%" height="264"></u--image>
		<swiper class="swiper" :indicator-dots="true"
		indicator-active-color="#ffffff" indicator-color="rgba(255,255,255,0.3)">
			<swiper-item>
				<view class="swiper-item border-box">
					<view class="f-base m-b-20 flex-no-horizontal">
						<u-icon name="info-circle" size="16" class="m-r-5" color="white"></u-icon>
						<view class="f-base bold">元石</view>
					</view>
					<view class="f-base">
						轻松小镇内部推出的两种活动积分之一，数量不限，主要用于兑换积分盲盒、为艾草种子施肥等小镇游戏玩法。目前可通过签到、邀请好友参与活动、完成实名奖励等任务获得，未来可用于兑换相关服务和道具。
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item border-box">
					<view class="title flex-no-horizontal m-b-20">
						<text class="grey f-xs" :class="active === 1 ? 'active' : ''"
						@click="change(1)">收</text>
						<text class="line"></text>
						<text class="grey f-xs" :class="active === 2 ? 'active' : ''"
						@click="change(2)">支</text>
					</view>
					<view class="record" v-if="list.length">
						<view class="record-item m-b-20" v-for="(item, index) in list" :key="index">
							<view class="flex-no-horizontal record-item-title m-b-10">
								<view class="f-base">{{ item.state }}</view>
								<view class="bold f-17">{{ item.type === 1 ? "+" : "-" }}{{ item.quantity }}</view>
							</view>
							<view class="grey f-xxs">{{item.time | date('yyyy-mm-dd hh:MM')}}</view>
						</view>
					</view>
					<view class="empty" v-else>
						暂无记录~
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		stoneRecord
	} from '../../api/collection.js'
	export default {
		data () {
			return {
				active: 1,
				list: []
			}
		},
		computed: {
			...mapState({
				user: state => state.userInfo
			})
		},
		onLoad() {
			this.getRecordList()
		},
		methods: {
			change (index) {
				this.active = index
				this.getRecordList()
			},
			async getRecordList () {
				try{
					const res = await stoneRecord({
						type: this.active
					})
					this.list = res.data.storelog
				} catch(e) {
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.stone {
		min-height: 100%;
		background-color: #000000;
		color: white;
		.number {
			font-size: 43px;
		}

		.grey{
			color: #565656;
		}

		.swiper{
			margin-top: 40rpx;
			height: 550rpx;
			.swiper-item{
				height: 100%;
				background: url(../../static/img/stone-bg.png) no-repeat;
				background-size: 100% 100%;
				border-radius: 40rpx;
				overflow: auto;
				padding: 60rpx;
				.empty{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80%;
					font-size: 14px;
				}
			}
			// ::v-deep .uni-swiper-wrapper{
			// 	overflow: auto;
			// 	.uni-swiper-dots-horizontal{
			// 		bottom: -40rpx;
			// 	}
			// }
			.active{
				font-size: 19px;
				color: white;
				font-weight: 700;
			}

			.line{
				width: 1px;
				height: 38rpx;
				background: #FFFFFF;
				margin: 0 10px;
				display: inline-block;
			}

			.record-item{
				.record-item-title{
					justify-content: space-between;
				}
			}
		}
	}
</style>
